<template>
    <div id="bmap" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight+'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import { createPinia } from 'pinia'
import world from '@/components/maps/map/json/world.json'
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  type TooltipComponentOption,
  GeoComponent,
  type GeoComponentOption,
  LegendComponent,
  type LegendComponentOption,
  VisualMapComponent,
  type VisualMapComponentOption,
  GridComponent, 
  type GridComponentOption,
  MarkPointComponent,
  type MarkPointComponentOption,
  TitleComponent,
  type TitleComponentOption
} from 'echarts/components';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { MapChart, type MapSeriesOption, PieChart, type PieSeriesOption,
    BarChart, type BarSeriesOption
 } from 'echarts/charts';
import { useChartsStore } from '@/stores/charts';
const pinia = createPinia();
const chartStore = useChartsStore(pinia)
echarts.use([
  TooltipComponent,
  GeoComponent,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
  VisualMapComponent,
  MapChart,
  GridComponent,
  MarkPointComponent,
  LegendComponent,
  PieChart,
  BarChart,
  TitleComponent
]);

type EChartsOption = echarts.ComposeOption<
  | TooltipComponentOption
  | GeoComponentOption
  | LegendComponentOption
  | VisualMapComponentOption
  | MapSeriesOption
  | GridComponentOption
  | MarkPointComponentOption
  | LegendComponentOption
  | PieSeriesOption
  | BarSeriesOption
  | TitleComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })

onMounted(() => {
    echarts.registerMap('world', world);
    var chartDom = document.getElementById('bmap')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        title: {show: false, name: "世界地图"},
        color: chartStore.colors,
        grid: { show: true, left: "0", right: "0", bottom: "0", top: "0", borderColor: "transparent" },
        geo: {
            show: true,
            map: 'world',
            roam: false,
            zoom: 1.2,
            nameMap: {'World' : '世界地图'},
            label: { 
                show: true, 
                color: '#000000',
                fontSize: 16,
                fontWeight: 'bold',
                formatter: (params) => {
                    let data = props.data.seriesDataList.filter(m => m.name === params.name)
                    console.log('params: ', params, data)
                    return data.length ? data[0].name + ":" + data[0].value : ""
                }
            },
            itemStyle: {
                areaColor: '#1764E8',
                borderColor: '#fefefe',
                borderWidth: 2,
                borderType: 'dashed'
            },
            emphasis: {
                disabled: false,
                label: { show: true, color: '#ffffff', fontSize: 20,},
                itemStyle: {
                    areaColor: '#0e3c8b',
                    borderColor: '#2e74ea',
                    borderWidth: 4,
                    borderType: 'soild'
                },
            },
            select: {
                disabled: false,
                label: { show: true, color: '#000000', fontSize: 24},
                itemStyle: {
                    areaColor: '#5d93ef',
                    borderColor: '#2e74ea',
                    borderWidth: 4,
                    borderType: 'soild'
                },
            },
            
            left: '10%',
            top: '10%',
        },
        tooltip: {
            show: true,
            position: 'right',
            formatter: (param, index) => {
                return param.value ?  [param.name+"：", param.value].join('\n') : null
            },
            backgroundColor: '#a2c1f6',
            borderColor: '#0e3c8b',
            borderWidth: 2,
            textStyle: { 
                color: 'blue',
                fontSize: 18,
                fontWeight: 600
            }
        },
        series: [
            {
                type: 'map',
                map: 'world',
                geoIndex: 0,
                data: [
                    { name: "China",  value: 1000},
                    { name: "Russia", value: 120, },
                    { name: "Sudan",  value: 100, },
                    { name: "Brazil", value: 150, },
                ],
            },
            {
                type: 'lines',
                coordinateSystem: 'geo', // 指定坐标系为地理坐标系
                lineStyle: {
                    color: '#ff0000' ,
                    width: 2,
                    type: 'solid',
                    cap: 'round',
                    join: 'round',
                    curveness: 1,
                    label: {
                        show: true,
                        position: 'middle',
                        color: '#ffffff'
                    }
                },
                data: [
                    {
                        name: "北京",
                        coords: [
                            [116.405285, 39.904989], // 起点坐标 [经度, 纬度]
                            [55.8, 37.6] // 终点坐标
                        ],
                        smooth: true
                        // 其他线条样式配置...
                    },
                    {
                        
                        coords: [
                            [116.405285, 39.904989], // 起点坐标 [经度, 纬度]
                            [55.8, 37.6] // 终点坐标
                        ],
                        // 其他线条样式配置...
                    },
                    {
                        coords: [
                            [116.405285, 39.904989], // 起点坐标 [经度, 纬度]
                            [40.43, 70.00] // 终点坐标
                        ],
                        // 其他线条样式配置...
                    },
                    {
                        coords: [
                            [116.405285, 39.904989], // 起点坐标 [经度, 纬度]
                            [48, 25] // 终点坐标
                        ],
                        // 其他线条样式配置...
                    },
                    {
                        coords: [
                            [40.43, 70.00], // 起点坐标 [经度, 纬度]
                            [48, 25] // 终点坐标
                        ],
                        // 其他线条样式配置...
                    }
                ],
            },
            {
                type: 'effectScatter',
                coordinateSystem: 'geo', // 指定坐标系为地理坐标系
                data: [
                    {
                        name: "北京",
                        value: [116.405285, 39.904989], // 连接点坐标 [经度, 纬度]
                        // 其他散点样式配置...
                    },
                    {
                        name: "莫斯科",
                        value: [55.8, 37.6], // 连接点坐标 [经度, 纬度]
                        // 其他散点样式配置...
                    },
                    {
                        name: "纽约",
                        value: [40.43, 70.00], // 连接点坐标 [经度, 纬度]
                        // 其他散点样式配置...
                    },
                    {
                        name: "旧金山",
                        value: [48, 25], // 连接点坐标 [经度, 纬度]
                        // 其他散点样式配置...
                    }
                ],
                // 其他连接点数据配置...
            }
        ]
    };

    option && myChart.setOption(option);

    

})
</script>

<style scope>
</style>